<template>
  <div class="app-container">
    <!-- 添加或修改证件借还对话框 -->
      <el-form ref="form" :model="form" :rules="rules"label-width="150px" style="margin-left: 50px;margin-top: 30px;width: 700px">
        <el-form-item label="员工姓名" prop="employeeName">
          <el-input v-model="form.employeeName" placeholder="请输入员工姓名" />
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input v-model="form.department" placeholder="请输入部门" />
        </el-form-item>
        <el-form-item label="职务" prop="position">
          <el-input v-model="form.position" placeholder="请输入职务" />
        </el-form-item>
        <el-form-item label="证件编号" prop="documentNumber">
          <el-input v-model="form.documentNumber" placeholder="请输入证件编号" />
        </el-form-item>
        <el-form-item label="证件有效期" prop="documentValidUntil">
          <el-input v-model="form.documentValidUntil" placeholder="请输入证件有效期" />
        </el-form-item>
        <el-form-item label="证件借出日期" prop="borrowDate">
          <el-date-picker clearable
            v-model="form.borrowDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择证件借出日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="证件归还日期" prop="returnDate">
          <el-date-picker clearable
            v-model="form.returnDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择证件归还日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="借用人联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入借用人联系电话" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">申请</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

  </div>
</template>

<script>
import { listDocumentBorrowReturn, getDocumentBorrowReturn, delDocumentBorrowReturn, addDocumentBorrowReturn, updateDocumentBorrowReturn } from "@/api/system/documentBorrowReturn";
import {addEvection} from "@/api/system/evection";

export default {
  name: "DocumentBorrowReturn",
  dicts: ['document_borrow_return'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 证件借还表格数据
      documentBorrowReturnList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        employeeName: null,
        department: null,
        documentType: null,
        documentNumber: null,
        status: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onSubmit() {
      addEvection(this.form).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.reset();
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        employeeName: null,
        department: null,
        position: null,
        documentType: null,
        documentNumber: null,
        documentValidUntil: null,
        borrowDate: null,
        returnDate: null,
        phone: null,
        status: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      addDocumentBorrowReturn(this.form).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.open = false;
        this.getList();
      });
    },
  }
};
</script>
